// 遵循commonjs规范
const { smart } = require("webpack-merge")
const { distPath, srcPath } = require("./paths.js")
const webpack = require("webpack")
const webpackCommonConf = require("./webpack.common.js")
// 热更新模块是webpack内置的模块
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

module.exports = smart(webpackCommonConf, {
  mode: "development",  // 指定开发模式打包
  module: {
    rules: [
      {
        test: /\.js$/,
        // 开启babel缓存，第二次构建时，会读取之前的缓存
        loader: ["babel-loader?cacheDirectory"],
        // 下面的二个配置，只需要写一样
        // 告诉babel只去转化src下面的项目源码
        include: srcPath,
        // 告诉babel，node_modules中的代码不要转化
        // exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: ["file-loader"],
      },
      {
        test: /\.css$/,
        // loader执行顺序是从后向前的
        // 先使用css-loader加载css模块，处理之，交给style-loader
        // style-loader是通过操作DOM的方式，把样式插入到页面中
        loader: ["style-loader", "css-loader",],
      },
      {
        test: /\.less$/,
        // 模块后缀是以less结束的，需要使用less-loader转化成css
        loader: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
    ]
  },
  plugins: [
    // 忽略 moment 下的 /locale 目录
    new webpack.IgnorePlugin(/\.\/locale/, /moment/),

    // 自动刷新 或 热更新都是在开发环境下配置
    new HotModuleReplacementPlugin()
  ],
  // 配置开发服务器，在内存中打包
  devServer: {
    port: 8080,
    progress: true, // 显示打包的进度条
    open: true, // 打包成功，自动打开浏览器
    contentBase: distPath, // 根目录（打好的包是放在内存中的）
    compress: true, // 启动gzip压缩 （复习http时）

    hot: true,

    proxy: {
      "/api": "http://www.baidu.com",
      "/api2": {
        target: "http://www.baidu.com",
        pathRewrite: {
          "/api2": ""
        }
      }
    }
  },
  // 配置了webpack-dev-server，就会开启自动刷新
  // watch: true, // 开启监听，默认为 false
  // watchOptions: {
  //   ignored: /node_modules/, // 忽略哪些
  //   // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
  //   // 默认为 300ms
  //   aggregateTimeout: 300,
  //   // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
  //   // 默认每隔1000毫秒询问一次
  //   poll: 1000
  // }
})

